<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/tailwindcss.js"></script>
		<style>
			.mui-bar-tab {
				padding: 0 0.625rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.mui-bar {
				box-shadow: none;
			}

			.mui-bar-tab button {
				width: 100%;
				background: #ff4f00;
				border: none;
				border-radius: 2.125rem;
				color: #ffffff;

			}

			.mui-bar .mui-btn {
				padding: 8px 12px;
				top: 0;
				padding: 8px 6.25rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<div class="mui-content">
			<!-- 轮播图 -->
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<img src="./images/banner-04.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-01.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-02.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-03.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<div class="mui-slider-item">
						<img src="./images/banner-04.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
					<!--支持循环，需要重复图片节点-->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<img src="./images/banner-01.jpg" alt="" srcset="" style="width: 100%;" />
					</div>
				</div>
			</div>
			<div class="goods-details">
				<div class="goods-details-grid">
					<div class="title mb-2">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
					<div class="goods-price-group">
						<div style="display: flex;align-items: center;">
							<div><span>到手价￥</span>
								<span class="price">399.00</span>
							</div>
							<span class="ml-2">原价￥499.00</span>
						</div>
						<div>已售 1000+</div>
					</div>
				</div>
				<div class="goods-details-grid">
					<div class="goods-details-grid-address">
						<div class="mui-row mb-3">
							<div class="mui-col-xs-3">
								选择：
							</div>
							<div class="mui-col-xs-9">
								<a href="address.html"
									style="display: flex;align-items: center;justify-content: space-between;">
									配送至：广东省广州市
									<img src="images/ico_15.png" alt="" style="width: 0.9375rem;" />
							</div>
							</a>

						</div>
						<div class="mui-row mb-3">
							<div class="mui-col-xs-3">
								发货：
							</div>
							<div class="mui-col-xs-9">
								广东广州 | 快递：快递包邮
							</div>

						</div>
						<div class="mui-row">
							<div class="mui-col-xs-3">
								保障：
							</div>
							<div class="mui-col-xs-9">
								<div class="mb-2">7天无理由退换货</div>
								<div class="mb-2">商家免费赠送运费险</div>
								<div>7承诺48小时内发货，晚发必赔</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="rich-text">
				<img src="images/pic_13.jpg" alt="" srcset="" />
				<img src="images/pic_09.jpg" alt="" srcset="" />
				<img src="images/pic_10.jpg" alt="" srcset="" />
				<img src="images/pic_11.jpg" alt="" srcset="" />
				<img src="images/pic_12.jpg" alt="" srcset="" />
			</div>

			<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom"
				style="height: 80vh;overflow: auto;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="goods-details-model">
							<a href="address.html">
								<div class="address-group">
									<div class="address-item">
										<div class="address-item-content">
											<img src="images/ico_26.png" alt="">
											<div class="userinfo">
												<div>
													<span class="username">十一</span>
													<span class="phone">15902931513</span>
												</div>
												<div class="address">广东省广州市天河区 2栋1203广东省广州市天河区 2栋1203广东省广州市天河区 2栋1203
												</div>
											</div>
										</div>
										<img src="images/ico_15.png" alt="" class="edit"
											style="width: 15px;height: 15px;" />
									</div>
								</div>
							</a>


							<div class="mt-2 mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
							<div class="mui-row" style="padding: 0.625rem;">
								<div class="mui-col-xs-3">
									<img src="images/pic_01.jpg" alt="" style="width: 100%;" />
								</div>
								<div class="mui-col-xs-9" style="padding-left: 0.625rem;">
									<div class="title mb-2" style="	font-size: 0.9375rem;">Cointreau君度甜橙力娇酒利口酒小酒伴50ml
									</div>
									<div class="goods-price-group">
										<div style="display: flex;align-items: center;">
											<div><span>到手价￥</span>
												<span class="price">399.00</span>
											</div>
											<span class="ml-2">原价￥499.00</span>
										</div>
										<div>已售 1000+</div>
									</div>
									<div class="mui-numbox mt-2">
										<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
										<input class="mui-input-numbox" type="number" value="1" />
										<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
									</div>
								</div>
							</div>
							<div class="mt-2 mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
							<div class="mt-2" style="padding: 0.625rem;">规格</div>
							<div class="sku">
								<button type="button" class="mui-btn mui-btn-outlined  mb-2">53度黄盖 * 6瓶</button>
								<button type="button" class="mui-btn mui-btn-outlined mb-2">53度黄盖 * 1瓶</button>
								<button type="button" class="mui-btn mui-btn-outlined  mb-2">53度黄盖 * 12瓶（整箱）</button>
								<button type="button" class="mui-btn mui-btn-outlined  mb-2">48度黄盖 * 6瓶</button>
								<button type="button" class="mui-btn mui-btn-outlined  mb-2">48度黄盖 * 1瓶</button>
								<button type="button" class="mui-btn mui-btn-outlined  mb-2">48度黄盖 * 12瓶（整箱）</button>
							</div>
							<div style="padding: 0.625rem;padding-top: 0;">
								<div class="selectd-sku">
									已选择：53度黄盖 * 6瓶
								</div>
							</div>
							<div class=" mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
							<div class="mui-card">
								<form class="mui-input-group">
									<div class="mui-input-row mui-radio">
										<label style="display: flex;align-items: center;">
											<img src="images/ico_42.png" alt=""
												style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
											微信</label>
										<input name="radio1" type="radio">
									</div>
									<div class="mui-input-row mui-radio">
										<label style="display: flex;align-items: center;">
											<img src="images/ico_43.png" alt=""
												style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
											支付宝</label>
										<input name="radio1" type="radio">
									</div>

								</form>
							</div>
							<a href="order-list.html" class="pay">立即支付 ￥：308.00</a>
							<!--  -->
						</div>

					</div>
				</div>

			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<div style="display: flex;align-items: center;">
				<a href="customer-service.html"><img src="images/ico_41.png" alt="" srcset=""
						style="width: 1.875rem;height: 1.875rem;margin-left: 0.625rem;" /></a>
				<img src="images/ico_39.png" alt="" srcset=""
					style="width: 1.875rem;height: 1.875rem;margin-left: 1.25rem;" />
			</div>
			<a href="#picture">
				<button type="button" class="mui-btn">立即购买</button>
			</a>
		</nav>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			mui('.mui-scroll-wrapper').scroll();
			// var gallery = mui('.mui-slider');
			// gallery.slider({
			// 	interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
			// });
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			var info = document.getElementById("info");
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');
				info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
			})
		</script>
	</body>

</html>